"use client";

import { memo } from "react";
import type { ReactNode, FC } from "react";
import styles from "./style.module.scss";
import ListHeader from "@/components/list-header";
import { shallowEqualApp, useAppSelector } from "@/store/hooks";
import { getImgOnSize } from "@/utils/format";
interface IProps {
  children?: ReactNode;
}

interface Anchor {
  id: number;
  avatarUrl: string;
  nickName: string;
  score: string;
}

const TopAnchors: FC<IProps> = (props) => {
  const { anchors } = useAppSelector(
    (state: any) => ({
      anchors: state.recommended.topAnchors,
    }),
    shallowEqualApp
  );
  return (
    <div className={styles.topAnchorsWrapper}>
      <ListHeader name={"热门主播"} moreLink={""}></ListHeader>
      <div className={styles.list}>
        {anchors.map((anchor: Anchor) => {
          return (
            <div className={styles.content} key={anchor.id}>
              <div className={styles.img}>
                <img src={getImgOnSize(anchor.avatarUrl, 40)} alt="" />
              </div>
              <div className={styles.info}>
                <a href="">{anchor.nickName}</a>
                <p>{anchor.score}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default memo(TopAnchors);
